new Vue({
  el: '#newsCotainer',
  data: {
    newsList: [],
    newsInfo: [],
    newsListResault: [],
    newsTopList: [],
    otherList: [],
  },

  methods: {
    // 读取数据
    readFile() {
      this.$http.get('./moongoDB/news').then(response => {
        let res = response.body;
        if (res) {
          this.readAjax();
          this.newsList = res;
          this.newsInfo = res.filter(item => item._id == getUrlParams()._id)[0];
          document.title = `${this.newsInfo.title} | Z-anime`;

          // 默认渲染
          this.filterArea();
          this.readNumSort();
        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    // 分区筛选
    filterArea() {
      this.newsListResault = this.newsList.filter(item => item.area == this.newsInfo.area);
      this.otherList = this.newsListResault.filter(item => item._id != this.newsInfo._id).slice(0, 10);
    },

    // 浏览次数排序
    readNumSort() {
      this.newsTopList = this.newsListResault.concat().sort(valueSortBy("readNum", "title")).reverse().slice(0, 8);
    },

    // 浏览+1
    readAjax() {
      $.ajax({
        type: 'POST', url: '/node/readNum',
        data: { "_id": getUrlParams()._id }
      }).then((res) => { console.log(res) },
        (res) => { console.log(res) });
    },

    toIndexClick() {
      window.location.href = `/`
    },
    toNewClick() {
      window.location.href = `./new`;
    },
    toNewAreaClick(area) {
      area = ["日本", "国产", "欧美"].indexOf(area);
      window.location.href = `./new?area=${area}`;
    },
    toNewInfoClick(_id) {
      window.location.href = `./newInfo?_id=${_id}`;
    }
  },


  created() {
    this.readFile();
    // 专区
    $('#newsCotainer .url').append(`<span class="urlTitle" @click="toNewAreaClick(newsInfo.area)">{{newsInfo.area}}</span> >
    <span class="urlTitle">{{newsInfo.title}}</span> `)

    // 主体
    // 标题
    $('.newInfo_title').html(`{{newsInfo.title}}`)
    // 其他信息
    $('.newInfo_other .newInfo_time').html(`{{newsInfo.time}}`);
    $('.newInfo_other .newInfo_writer').html(`作者：{{newsInfo.writer}}`);
    $('.newInfo_other .newInfo_area').html(`分区：{{newsInfo.area}}`);
    $('.newInfo_other .newInfo_readNum ').html(`<span class="icon"></span>{{newsInfo.readNum+1}}`);

    // 排行
    $('.topNewLists').html(`<div v-for="(item,index) in newsTopList" class="topNewList">
   <div class="title" @click="toNewInfoClick(item._id)">
     <div class="topNum">{{index + 1}}</div>
     {{item.title}}
   </div>
      <span class="readNum">
      <span class="icon"></span>
      <div class="num" v-if="item!=newsInfo">{{item.readNum}}</div>
      <div class="num" v-if="item==newsInfo">{{item.readNum+1}}</div>
      <span>
     
   </div>`)
    // 其他
    $('.otherLists').html(`<div class="otherList" v-for="item in otherList">
    <div class="imgC" @click="toNewInfoClick(item._id)">
     <img :src="item.imgSrc" alt=""/>
    </div>
    <div class="content">
      <div class="title" @click="toNewInfoClick(item._id)">{{item.title}}</div>
      <div class="other">
       <span class="readNum">
         <span class="icon"></span>
         {{item.readNum}}
         <span class="time">{{item.time.slice(0,10)}}</span>
      </span>
    </div>
      
    </div>
   </div>`)

  },


  updated() {

  },

});